<template>
    <!-- 订单列表 -->
    <div class="view_order">
        <card title="订单列表">
            <template #actions>
                <el-select class="w-28" v-model="queryOrderStatus" placeholder="订单状态" clearable>
                    <el-option v-for="(val, key) in orderStatus" :key="key" :value="key" :label="val.text" />
                </el-select>
                <el-select class="w-28" v-model="queryByWhat">
                    <el-option v-for="(val, key) in queryBySomething" :key="key" :value="key" :label="val" />
                </el-select>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    :placeholder="placeholder"
                    prefix-icon="el-icon-search"
                    clearable
                />
            </template>
            <template #default>
                <el-table :data="tableData">
                    <el-table-column type="index" align="center" label="#" />
                    <el-table-column prop="orderSn" label="买家订单号" />
                    <el-table-column prop="sellerOrderSn" label="卖家订单号" />
                    <el-table-column prop="sellerShopName" label="店铺名" />
                    <el-table-column prop="buyerNickName" label="买家昵称" />
                    <el-table-column prop="totalQuantity" label="商品总数量" />
                    <el-table-column prop="totalAmount" label="订单金额/元" :formatter="amountFormatter" />
                    <el-table-column prop="integration" label="传感器押金/元" :formatter="amountFormatter" />
                    <el-table-column prop="deductIntegral" label="使用积分/分" />
                    <el-table-column label="实付金额/元" :formatter="totalAmountFormatter" />
                    <el-table-column label="支付方式">
                        <template #default="{ row: { payType } }">
                            {{ orderPaymentMethods[payType] || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="订单状态">
                        <template #default="{ row: { deliverStatus } }">
                            <el-tag effect="dark" :type="orderStatus[deliverStatus].tagType">
                                {{ orderStatus[deliverStatus].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" />
                    <el-table-column label="操作">
                        <template #default="{ row: { orderSn, sellerOrderSn } }">
                            <el-button type="text" @click="viewOrderDetails(orderSn, sellerOrderSn)">
                                查看详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 订单详情对话框 -->
        <el-dialog :visible.sync="visible" custom-class="details_dialog">
            <template #default>
                <div class="desc_list">
                    <div class="desc_list-top">
                        <h1 class="desc_list-title">订单号：{{ orderDetails.orderSn }}</h1>
                        <p class="desc_list-subtitle">买家：{{ orderDetails.buyerNickName }}</p>
                    </div>
                    <dl class="desc_list-content">
                        <div class="desc_list-item">
                            <dt>支付方式</dt>
                            <dd>
                                {{ orderPaymentMethods[orderDetails.payType] || '-' }}
                            </dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>支付时间</dt>
                            <dd>{{ orderDetails.paymentTime || '-' }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>订单状态</dt>
                            <dd>{{ orderStatus[orderDetails.deliverStatus].text }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>获得积分</dt>
                            <dd>{{ orderDetails.integration }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>是否溯源</dt>
                            <dd>{{ orderDetails.roots ? '是' : '否' }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>物流公司</dt>
                            <dd>{{ orderDetails.deliveryCompany || '-' }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>物流单号</dt>
                            <dd>{{ orderDetails.deliverySn || '-' }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>收货人</dt>
                            <dd>{{ orderDetails.receiverName }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>收货人手机号码</dt>
                            <dd>{{ orderDetails.receiverPhone }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>收货地址</dt>
                            <dd>{{ orderDetails.receiverAddress }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>运费</dt>
                            <dd>{{ orderDetails.freightAmount }}</dd>
                        </div>
                        <!-- <div class="desc_list-item">
                            <dt>实付金额</dt>
                            <dd>
                                {{
                                    formatAmount(
                                        orderDetails.payAmount +
                                            orderDetails.integration -
                                            orderDetails.deductIntegral
                                    )
                                }}
                            </dd>
                        </div> -->
                        <div class="desc_list-item">
                            <dt>发货时间</dt>
                            <dd>{{ orderDetails.deliveryTime || '-' }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>买家备注</dt>
                            <dd>{{ orderDetails.buyerNote || '-' }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>卖家备注</dt>
                            <dd>{{ orderDetails.sellerNote || '-' }}</dd>
                        </div>

                        <!-- 订单商品列表 -->
                        <div class="desc_list-item">
                            <dt>订单商品列表</dt>
                            <el-table :data="orderDetails.productList">
                                <el-table-column type="index" label="#" align="center" />
                                <el-table-column label="封面图">
                                    <template #default="{ row }">
                                        <img :src="row.skuDefaultPic" :alt="row.skuDefaultPic" srcset="" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="skuTitle" label="商品名" />
                                <el-table-column prop="name" label="品牌名" />
                                <el-table-column prop="price" label="单价" :formatter="amountFormatter" />
                                <el-table-column prop="skuQuantity" label="件数" />
                                <el-table-column prop="totalAmount" label="总金额" />
                            </el-table>
                        </div>
                    </dl>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';
import { formatAmount } from '../../functions';

export default {
    data() {
        return {
            tableData: null,

            visible: false,

            orderDetails: {},

            queryByWhat: 'orderSn',
            queryOrderStatus: '',

            // 总金额格式化器
            totalAmountFormatter(row) {
                return formatAmount(row.totalAmount + row.integration - row.deductIntegral);
            },

            amountFormatter(row, column, cellValue) {
                return formatAmount(cellValue);
            },
            formatAmount,
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/oms/findOrder',
            paginable: true,
            params: {
                queryString: 'queryByWhat',
                queryOrderStatus: 'deliverStatus',
            },
        }),
    ],

    methods: {
        // 查看订单详情
        viewOrderDetails(orderSn, sellerOrderSn) {
            this.$get('/yxl/oms/findOrderDetails', { orderSn, sellerOrderSn }).then(res => {
                // 转码图片
                // let allImages = res.productList.map(product => product.skuDefaultPic);
                // toJpeg(allImages).then(convertedResult => {
                //     convertedResult.forEach((item, index) => {
                //         res.productList[index]._native_url = item;
                //     });

                // });
                this.orderDetails = res;
                this.visible = true;
            });
        },
    },

    computed: {
        // 按某物查询
        queryBySomething() {
            return {
                orderSn: '订单号',
                sellerShopName: '店铺名',
                receiverName: '收货人',
                receiverPhone: '收货人电话',
            };
        },
        // 占位符
        placeholder() {
            return `按${this.queryBySomething[this.queryByWhat]}查询`;
        },

        // >>>>> 订单状态常量
        orderPaymentMethods() {
            return {
                1: '支付宝',
                2: '微信',
            };
        },

        orderStatus() {
            return {
                1: { text: '待发货', tagType: 'warning' },
                2: { text: '已发货', tagType: 'success' },
                3: { text: '已完成', tagType: 'success' },
                4: { text: '待付款', tagType: 'warning' },
                5: { text: '已关闭', tagType: 'info' },
                6: { text: '已取消', tagType: 'info' },
                7: { text: '已退款', tagType: 'danger' },
            };
        },

        orderDeletionStatus() {
            return {
                0: '未删除',
                1: '已删除',
            };
        },
        // 订单状态常量 <<<<<
    },

    watch: {
        queryOrderStatus: 'query',
    },
};
</script>